<template>
  <div class="workbench-wrapper">
    <container-box :metaTitle="routeMeta.title || ''">
      <div slot="container" >
        <div class="searchTable">
         <div class="header">
            <span class="headName">筛选表格</span>
        </div>
        <div class="searchBox">
            <div class="search">
                <span class="labelbox">时间范围<p style="display:inline-block; color:red;">*</p></span>
                <div class="handleBox">
                <mds-radio-group v-model="checkedValue1" @change="handleChange">
                    <mds-radio-btn value="1">近一天</mds-radio-btn>
                    <mds-radio-btn value="7">近七天</mds-radio-btn>
                </mds-radio-group>
                <mds-select
                    :value="demoValue1"
                    clearable
                    style="width: 98px;font-size:14px;margin-left:8px;"
                    placeholder="请选择"
                    size="small"
                    @change="handleChange"
                    >
                    <mds-option value="七月">七月</mds-option>
                    <mds-option value="八月">八月</mds-option>
                </mds-select>
                </div>
            </div>
            <div class="search">
                <span class="labelbox">业务线<p style="display:inline-block; color:red;">*</p></span>
                <mds-select
                    :value="demoValue2"
                    clearable
                    style="width: 260px;font-size:14px;"
                    placeholder="请选择"
                    size="small"
                    @change="handleChange"
                    >
                    <mds-option value="黄页">黄页</mds-option>
                    <mds-option value="房产">房产</mds-option>
                </mds-select>
            </div>
            <div class="search">
                <span class="labelbox">多级选择<p style="display:inline-block; color:red;">*</p></span>
                <div class="handleBox">
                     <mds-select
                        :value="demoValue3"
                        clearable
                        style="width: 81px;font-size:14px;"
                        placeholder="请选择"
                        size="small"
                        @change="handleChange"
                        >
                        <mds-option value="黄页">黄页</mds-option>
                        <mds-option value="房产">房产</mds-option>
                    </mds-select>
                     <mds-select
                        :value="demoValue4"
                        clearable
                        style="width: 81px;font-size:14px;"
                        placeholder="请选择"
                        size="small"
                        @change="handleChange"
                        >
                        <mds-option value="黄页">黄页</mds-option>
                        <mds-option value="房产">房产</mds-option>
                    </mds-select>
                     <mds-select
                        :value="demoValue5"
                        clearable
                        style="width: 81px;font-size:14px;"
                        placeholder="请选择"
                        size="small"
                        @change="handleChange"
                        >
                        <mds-option value="黄页">黄页</mds-option>
                        <mds-option value="房产">房产</mds-option>
                    </mds-select>
                </div>

            </div>
            <div class="search">
                <span class="labelbox">多级选择<p style="display:inline-block; color:red;">*</p></span>
                <div class="handleBox">
                     <mds-select
                        :value="demoValue6"
                        clearable
                        style="width: 81px;font-size:14px;"
                        placeholder="请选择"
                        size="small"
                        @change="handleChange"
                        >
                        <mds-option value="黄页">黄页</mds-option>
                        <mds-option value="房产">房产</mds-option>
                    </mds-select>
                     <mds-select
                        :value="demoValue7"
                        clearable
                        style="width: 81px;font-size:14px;"
                        placeholder="请选择"
                        size="small"
                        @change="handleChange"
                        >
                        <mds-option value="黄页">黄页</mds-option>
                        <mds-option value="房产">房产</mds-option>
                    </mds-select>
                     <mds-select
                        :value="demoValue8"
                        clearable
                        style="width: 81px;font-size:14px;"
                        placeholder="请选择"
                        size="small"
                        @change="handleChange"
                        >
                        <mds-option value="黄页">黄页</mds-option>
                        <mds-option value="房产">房产</mds-option>
                    </mds-select>
                </div>
            </div>
        </div>
        <div class="empBar">
            <span class="line"></span>
        </div>
        <div class="termBox">
            <div class="term">
                <span>已选条件</span>
                <mds-tag v-for="(tag,index) in taglist" :key="index" color='blue'>{{tag}}</mds-tag>
            </div>
             <div class="btBox">
                <div style="height:36px;">
                    <mds-button size="small" style="margin-right:8px;width:80px;" type="primary">查 询</mds-button>
                </div>
            </div>
        </div>
        <mds-tabs class="mdsTabs" v-model="active">
            <mds-tabs-pane  style="float:left;" tab="Tab 1" :index="1">
              <div>

              </div>
             <div class="tableBox">
            <div class="tbbox">
                <div class="btnBox">
                     <mds-button type="primary" style="margin-right:8px;" icon="line-plus">
                    <span>增加</span>
                    </mds-button>
                    <mds-button   icon="line-download">
                    <span>导出</span>
                    </mds-button>
                </div>
                <span class="numBox"> <mds-icon type="exclamation-circle" />当前已确认参评评委数 200 人，确认截止时间： <p style="">2020-03-20 18:00:00</p></span>
            </div>
            <mds-table
style="background:rgb(255,255,255,1);padding:0 24px 0 24px;"
:columns="tableColumn"
                :data="tableList"
                border>
            </mds-table>
            <div class="paginationBox">
              <mds-pagination :total="600" :current="6" showQuickJumper ></mds-pagination>
            </div>
        </div>
            </mds-tabs-pane>
            <mds-tabs-pane tab="Tab 2" :index="2">Tab 2</mds-tabs-pane>
            <mds-tabs-pane tab="Tab 3" :index="3">Tab 3</mds-tabs-pane>
        </mds-tabs>
    </div>
      </div>
      <mds-card slot="info" class="mds-card" style="width: 280px" :loading="true">
        <div slot="header">
          <span>{{ routeMeta.title || '' }}</span>
        </div>
          <div v-for="o in 4" :key="o" class="text item">
            {{'列表内容 ' + o }}
          </div>
      </mds-card>
    </container-box>
  </div>
</template>

<script>
import ContainerBox from '@/components/ContainerBox'

export default {
  data() {
    return {
      checkedValue1: '1',
      taglist: ['一级品类', '2017-03-10', '黄页'],
      demoValue1: '七月',
      demoValue2: '黄页',
      demoValue3: '',
      demoValue4: '',
      demoValue5: '',
      demoValue6: '',
      demoValue7: '',
      demoValue8: '',
      active: 1,
      tableList: [
        {
          id: '123456',
          description: '这是一个文字描述的信息',
          updaterTime: '2020-02-02 13:00:33 ',
          status: '成功',
          price: '￥1666.00',
          age: 12
        }, {
          id: '123456',

          description: '这是一个文字描述的信息',
          updaterTime: '2020-02-02 13:00:33 ',
          status: '成功',
          price: '￥1666.00',
          age: 15
        },
        {
          id: '123456',
          description: '这是一个文字描述的信息',
          updaterTime: '2020-02-02 13:00:33 ',
          status: '成功',
          price: '￥1666.00',
          age: 20
        },
        {
          id: '123456',

          description: '这是一个文字描述的信息',
          updaterTime: '2020-02-02 13:00:33 ',
          status: '成功',
          price: '￥1666.00',
          age: 25
        },
        {
          id: '123456',

          description: '这是一个文字描述的信息',
          updaterTime: '2020-02-02 13:00:33 ',
          status: '成功',
          price: '￥1666.00',
          age: 30
        }
      ],
      tableColumn: [
        {
          title: '卡片ID',
          align: 'center',
          key: 'id'
        }, {
          title: '描述',
          key: 'description',
          width: 200
        }, {
          title: '更新时间',
          key: 'updaterTime',
          sortable: true,
          width: 200,
          scrtMethod(column) {
            console.log(column, '触发')
          }
        },
        {
          title: '状态',
          key: 'status',
          width: 100,
          render: (h, { row }) => {
            return h('div', [
              h('div', {
                class: {
                  success: row.status === '成功',
                  error: row.status === '失败',
                  warn: row.warn === '警告'
                }
              }),
              h('span', {
                style: {
                  height: '100%',
                  width: '100%'
                }
              }, row.status)
            ])
          }
        },
        {
          title: '价格',
          key: 'price',
          width: 100,
          sortable: true,
          scrtMethod(column) {
            console.log(column, '触发')
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 400,
          align: 'center',
          render: (h) => {
            return h('div', [
              h(
                'button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    width: '61px',
                    height: '17px',
                    fontSize: '12px',
                    fontFamily: 'PingFangSC',
                    fontWeight: 400,
                    color: 'rgba(3, 102, 255, 1)',
                    lineHeight: '17px',
                    border: 0,
                    outline: 'none',
                    background: 'none'
                  },
                  on: {
                    click: () => {
                      alert('编辑')
                    }
                  }
                },
                '编辑'
              ),
              h(
                'button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    width: '61px',
                    height: '17px',
                    fontSize: '12px',
                    fontFamily: 'PingFangSC',
                    fontWeight: 400,
                    color: 'rgba(3, 102, 255, 1)',
                    lineHeight: '17px',
                    border: 0,
                    outline: 'none',
                    background: 'none'
                  },
                  on: {
                    click: () => {
                      alert('删除')
                    }
                  }
                },
                '删除'
              ),
              h(
                'button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    width: '61px',
                    height: '17px',
                    fontSize: '12px',
                    fontFamily: 'PingFangSC',
                    fontWeight: 400,
                    color: 'rgba(3, 102, 255, 1)',
                    lineHeight: '17px',
                    border: 0,
                    outline: 'none',
                    background: 'none'
                  },
                  on: {
                    click: () => {
                      alert('预览')
                    }
                  }
                },
                '预览'
              ),
              h(
                'button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    width: '61px',
                    height: '17px',
                    fontSize: '12px',
                    fontFamily: 'PingFangSC',
                    fontWeight: 400,
                    color: 'rgba(3, 102, 255, 1)',
                    lineHeight: '17px',
                    border: 0,
                    outline: 'none',
                    background: 'none'
                  },
                  on: {
                    click: () => {
                      alert('测试')
                    }
                  }
                },
                '测试'
              )
            ])
          }
        }
      ]
    }
  },
  methods: {
    handleChange() {
      console.log('change')
    }
  },
  components: {
    ContainerBox
  },
  computed: {
    routeMeta() {
      return this.$route.meta || {}
    }
  }
}
</script>
<style lang="scss">
    .searchTable{
        background:rgba(240,242,245,1);
        width: 100%;
        border-radius:4px;
         .header{
            display: flex;
            background:rgba(255,255,255,1);
            justify-content: flex-start;
            justify-items: center;
            align-items: center;
            height: 56px;
            border-bottom: 1px solid rgba(240,242,245,1);
            .headName{
                display: flex;
                justify-content: center;
                justify-items: center;
                height:24px;
                font-size:16px;
                font-family:PingFangSC-Medium,PingFang SC;
                font-weight:500;
                color:rgba(53,64,82,1);
                line-height:24px;
                padding-left: 24px;
            }
        }
        .searchBox{
            display: flex;
            justify-content: flex-start;
            flex-direction: row;
            flex-wrap: wrap;
            padding: 24px 24px 31px 24px;
            // border-bottom: 1px solid rgba(216,220,230,1);
            background:rgba(255,255,255,1);
            .mds-radio-group {
              white-space: nowrap;
            }
            .search{
                display: flex;
                justify-content: space-around;
                flex-direction: column;
                margin-right: 23px;
                .handleBox{
                    display: flex;
                    justify-content: flex-start;
                    flex-direction: row;
                }
                .labelbox{
                    display: flex;
                    justify-content: flex-start;
                    margin-bottom: 8px;
                    font-size:14px;
                    font-family:PingFangSC-Regular,PingFang SC;
                    font-weight:400;
                    color:rgba(127,143,164,1);
                    line-height:22px;
                }
            }:last-child{
                 margin-right: 0px;
            }
            .btBox{
                display: flex;
                justify-content: flex-end;
                flex-direction: column;
            }
        }
        .empBar{
                width: 100%;
                height: 1px;
                background:rgba(255,255,255,1);
                display: flex;
                justify-content: center;
                flex-direction: column;
            .line{
                height: 1px;
                // width: 100%;
                background:rgba(216,220,230,1);
                 margin: 0 24px 0 24px;
            }
        }
        .termBox{
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            padding: 16px 24px 16px 24px;
            background:rgba(255,255,255,1);
        }
        .mdsTabs{
            .mds-tabs-bar{
               justify-content: flex-start;
            }
            .mds-tabs-tabpane{
              padding: 0px !important;
            }
            .mds-tabs-bar{
              border-bottom: 1px solid rgba(216,220,230,1);
            }
            .tableBox{
            display: flex;
            justify-content: flex-start;
            flex-direction: column;
            .tbbox{
                display: flex;
                justify-content: space-between;
                flex-direction: column;
                padding: 16px 24px  24px 24px;
                background:rgba(255,255,255,1);
                    .btnBox{
                        display:flex;
                        justify-content: flex-start;
                        flex-direction: row;
                        margin-top: 16px;
                    }
                  .numBox{
                      display: flex;
                      justify-content: flex-start;
                      flex-direction: row;
                      align-items: center;
                      background:rgba(238,248,255,1);
                      border-radius:4px;
                      margin: 16px 0 0 0;
                      padding-left: 25px;
                      p{
                        font-size:14px;
                        font-family:PingFangSC-Regular,PingFang SC;
                        font-weight:400;
                        color:rgba(3,100,255,1);
                        line-height:22px;
                      }
                }
            }
            .paginationBox{
              display: flex;
              justify-content: center;
              padding:24px 0;
              background:rgba(255,255,255,1);

            }

        }
        }
    }
</style>
